import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'
import {
    message,
    Form,
    Input,
    Button,
} from 'antd';

import request from '@/utils/request'

const ManagerChange = () => {
    const navigate = useNavigate()

    const { id } = useParams();


    const [myform] = Form.useForm()

    const [datalist, setdatalist] = useState({})
    const getData = async () => {
        const { data } = await request.get('/user/user/' + id)
        setdatalist(data.data[0])

        myform.setFieldsValue(data.data[0])
    }

    const submit = async ({user_id, ...values }) => {
        const  data  = await request.put('/user/change/'+id,values)
        if (data.data.code === 200) {
            message.success('修改成功')
            navigate('/manage/user_list')
        }
    }

    useEffect(() => {
        getData()
    }, [])
    return (
        <div>
            <div className='userchange'>
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                layout="horizontal"
                initialValues={datalist}
                onFinish={submit}
                form={myform}
            >
                <Form.Item wrapperCol={{offset: 8,span: 16,}}>
                    <h1 className='changeruserhead'>请修改用户信息</h1>
                </Form.Item>
                <Form.Item name="user_id" hidden>
                    <Input />
                </Form.Item>
                <Form.Item label="用户名称" name="username">
                    <Input />
                </Form.Item>
                <Form.Item label="用户密码" name='password'>
                    <Input />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 11 }}>
                    <Button type='primary' htmlType='submit'>修改</Button>
                </Form.Item>
                <Form.Item wrapperCol={{offset: 8,span: 16,}}>
                    <span>提示：请修改用户名与登录密码信息</span>
                </Form.Item>
            </Form>
            </div>
        </div>
    )
}


export default ManagerChange;